<%--
  Created by IntelliJ IDEA.
  User: yudejie2020
  Date: 2022/6/6
  Time: 18:38
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<link href="static/layui/css/layui.css" rel="stylesheet">
<script src="static/layui/layui.js"></script>
<html>
  <head>
    <title>$Title$</title>
  </head>
  <body>
  <%--行内工具栏--%>
  <script type="text/html" id="barDemo">
    <a 	class="layui-btn  layui-btn-xs" lay-event="detail">重置密码</a>
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
  </script>
  <%--头部工具栏--%>
  <script type="text/html" id="toolbarDemo">
    <a class="layui-btn layui-btn-sm" lay-event="add">添加</a>
    <a class="layui-btn layui-btn-danger layui-btn-sm" lay-event="delete">批量删除</a>
  </script>
  <form class="layui-form" action="" >
    <div class="layui-inline">
      <label class="layui-form-label">用户名</label>
      <div class="layui-input-inline">
        <input type="text" name="username" placeholder="请输入用户名" autocomplete="off" class="layui-input">
      </div>
    </div>
    <div class="layui-inline">
      <label class="layui-form-label">密码</label>
      <div class="layui-input-inline">
        <input type="text" name="password" placeholder="请输入密码" autocomplete="off" class="layui-input">
      </div>
    </div>

    <div class="layui-inline">
      <div class="layui-input-inline">
        <button class="layui-btn" lay-submit lay-filter="formDemo">查询</button>
        <button type="reset"  id="search_reset" class="layui-btn layui-btn-primary">重置</button>
      </div>
    </div>
  </form>

  <form class="layui-form" action=""  id="saveUserForm" style="display: none">
    <div class="layui-form-item">
      <label class="layui-form-label">用户名</label>
      <div class="layui-input-block">
        <input type="text" name="username" required  lay-verify="required" placeholder="请输入用户名" autocomplete="off" class="layui-input">
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">密码</label>
      <div class="layui-input-block">
        <input type="text" name="password" required  lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input">
      </div>
    </div>
<%--    <div class="layui-form-item">--%>
<%--      <label class="layui-form-label">盐值</label>--%>
<%--      <div class="layui-input-block">--%>
<%--        <input type="text" name="salt" required  lay-verify="required" placeholder="请输入盐值" autocomplete="off" class="layui-input">--%>
<%--      </div>--%>
<%--    </div>--%>
    <div class="layui-form-item">
      <label class="layui-form-label">部门编号</label>
      <div class="layui-input-block">
        <input type="text" name="deptid" required  lay-verify="required" placeholder="请输入部门编号" autocomplete="off" class="layui-input">
      </div>
    </div>

    <div class="layui-form-item">
      <div class="layui-input-block">
        <button class="layui-btn" lay-submit lay-filter="formSaveUser">立即提交</button>
        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
      </div>
    </div>
  </form>

  <form class="layui-form" action=""  id="saveUserForm" style="display: none">

    <div class="layui-form-item">
      <label class="layui-form-label">新密码</label>
      <div class="layui-input-block">
        <input type="text" name="password" required  lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input">
      </div>
    </div>
    <div class="layui-form-item">
      <div class="layui-input-block">
        <button class="layui-btn" lay-submit lay-filter="formSaveUser">立即提交</button>
        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
      </div>
    </div>
  </form>+
  <table id="demo" lay-filter="test"></table>
  <script>
    layui.use(['table','form','jquery'], function(){
      var table = layui.table;
      var form = layui.form;
      var $ = layui.jquery;
      //第一个实例
      table.render({
        elem: '#demo'
        ,height: 520
        ,url: 'userinfo?method=select' //数据接口
        ,page: true //开启分页
        ,limit:10
        ,limits:[5,10,15,20,25,30,50]
        ,autoSort: false//禁用前端的自动排序，开启后端的服务器排序，根据客户需求
        ,toolbar: '#toolbarDemo'//开启顶部工具栏
        ,cols: [[ //表头
          {type: 'checkbox', fixed: 'left'}
          ,{field: 'userid', title: 'ID', width:120, sort: true, fixed: 'left'}
          ,{field: 'username', title: '用户名', width:120}
          ,{field: 'password', title: '密码', width:200, sort: true}
          ,{field: 'salt', title: '盐值', width:200}
          ,{field: 'deptid', title: '部门编号', width: 100}
          ,{field: 'avatar', title: '头像', width: 120}
          ,{fixed: 'right', title: '操作',width: 230, align:'center', toolbar: '#barDemo'}
        ]]
      });

      //触发排序事件
      table.on('sort(test)', function(obj){ //注：sort 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
        console.log(obj.field); //当前排序的字段名
        console.log(obj.type); //当前排序类型：desc（降序）、asc（升序）、null（空对象，默认排序）
        console.log(this); //当前排序的 th 对象

        //尽管我们的 table 自带排序功能，但并没有请求服务端。
        //有些时候，你可能需要根据当前排序的字段，重新向服务端发送请求，从而实现服务端排序，如：
        table.reload('demo', {
          initSort: obj //记录初始排序，如果不设的话，将无法标记表头的排序状态。
          ,where: { //请求参数（注意：这里面的参数可任意定义，并非下面固定的格式）
            field: obj.field //排序字段
            ,order: obj.type //排序方式
          }
        });

        // layer.msg('服务端排序。order by '+ obj.field + ' ' + obj.type);
      });


      //监听头工具栏事件
      table.on('toolbar(test)', function(obj){
        var checkStatus = table.checkStatus(obj.config.id)
                ,data = checkStatus.data; //获取选中的数据
        switch(obj.event){
          case 'add':
            /*layer.msg('添加');*/
            //应该弹框输入信息，并保存
            layer.open({
              title: '添加用户',
              type: 1,
              content: $('#saveUserForm'), //这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响
              area: ['500px', '300px']
            });
            //弹出对话框，添加用户的form表单
            //监听form提交事件
            form.on('submit(formSaveUser)', function(data){
              //ajax方式提交表单数据，将数据保存至数据库中
              $.ajax({
                url:"${pageContext.request.contextPath}/userinfo?method=save",
                type:"POST",
                dataType:"JSON",
                data:data.field,
                success:function (ret) {
                  if(ret.code==0){
                    layer.closeAll();//关闭对话框
                    table.reload('demo', {
                      page: {
                        curr: 1 //重新从第 1 页开始
                      }
                    });
                  }
                  layer.msg(ret.msg);
                }
              });
              table.reload('demo', {
                page: {
                  curr: 1 //重新从第 1 页开始
                }
              });
              return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
            });
            break;
          case 'update':
            if(data.length === 0){
              layer.msg('请选择一行');
            } else if(data.length > 1){
              layer.msg('只能同时编辑一个');
            } else {
              layer.alert('编辑 [id]：'+ checkStatus.data[0].id);
            }
            break;
          case 'delete':
            if (data.length === 0) {
              layer.msg('请选择一行');
            } else {
              //定义一个数组，封装所有的id
              var ids = [];
              //循环所有选中的行
              for (let i = 0; i < data.length; i++) {
                ids[i] = data[i].userid;
              }
              layer.confirm('真的删除行么', function (index) {
                //去后台批量删除数据
                $.ajax({
                  url: "${pageContext.request.contextPath}/userinfo?method=delete",
                  type: "POST",
                  dataType: "JSON",
                  data: {userid: ids.join(",")},
                  success: function (data) {
                    if (data.code == 0) {
                      //关闭对话框
                      layer.closeAll(); //疯狂模式，关闭所有层
                      //刷新表格数据
                      table.reload('demo');

                    }
                    layer.msg(data.msg);
                  }

                });
              });
            }
            break;
        };
      });


      //监听form表单提交事件
      form.on('submit(formDemo)', function(data){
        console.log(data.elem) //被执行事件的元素DOM对象，一般为button对象
        console.log(data.form) //被执行提交的form对象，一般在存在form标签时才会返回
        console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value}
        table.reload('demo', {
          where: { //请求参数（注意：这里面的参数可任意定义，并非下面固定的格式）
            //此处打上search标记，目的是为了拼接sql语句
            searchUsername: data.field.username //排序字段
            ,searchPassword:data.field.password//排序方式
          },
          page: {
            curr: 1 //重新从第 1 页开始
          },

        });
        return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
      });


      //监听行工具事件
      table.on('tool(test)', function (obj) { //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
        var data = obj.data //获得当前行数据
        console.log(data)
                , layEvent = obj.event; //获得 lay-event 对应的值
        if (layEvent === 'detail') {
          layer.msg('查看操作');

        } else if (layEvent === 'del') {
          layer.confirm('您真的删除行么', function (index) {
            //删除数据库中
            $.ajax({
              url: "${pageContext.request.contextPath}/userinfo?method=delete",
              type: "POST",
              dataType: "JSON",
              data: {userid: data.userid},
              success: function (data) {
                if (data.code == 0) {
                  //关闭对话框
                  layer.closeAll(); //疯狂模式，关闭所有层
                  //刷新表格数据
                  table.reload('demo');

                }
                layer.msg(data.msg);
              }

            });
          });
        } else if (layEvent === 'edit') {
          layer.msg('编辑操作');
        }
      });




      //搜索表单重置
      $("#search_reset").click(function () {
        table.reload('demo', {
          where: { //请求参数（注意：这里面的参数可任意定义，并非下面固定的格式）
            searchUsername: "" //第一个查询条件
            ,searchPassword:""//第二个查询条件
          },
          page: {
            curr: 1 //重新从第 1 页开始
          },
        });
      })

    });
  </script>
  </body>
</html>
